<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        img{
            position: absolute;
            left:0;
            top:50px;
			
        }
        #demo{
            width:1000px;
            margin:0 auto;
        }
    </style>
</head>
<script src="../../../utils.js"></script>
  <script>
    // 在滚动条发生滚动的时候让广告的top运动到 50 + scrollTop
    window.onscroll = function () {
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      var pic = document.querySelector('#pic')
      utils.move1(pic, 'top', 50 + scrollTop)
    }
    
  </script>
<body>
	<img src="images/aside.jpg" alt="" id="pic"/>
<div id="demo">
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
</div>
</body>
</html>
